<template>
  <img src="@/assets/img/video/bg.png" style="width: 100%;height: 100%;display: block;" />
  <div class="video_auth_box">
    <div class="bottom_box">
      <div class="btn_list">
<!--        <swiper-->
<!--            class="my_swiper"-->
<!--            direction="horizontal"-->
<!--            :spaceBetween="15"-->
<!--        >-->
        <template v-for="(item, index) of state.videoAuthList" :key="item.id">
<!--          <swiper-slide class="swipe_item">-->
          <div
              :class="index == state.cur_selected_item ? 'row select_item_active' : 'row'"
              @click="selectClick(index)"
          >
            <div class="title">{{ item.title }}</div>
            <div class="price">
              <span class="symbol">¥</span>
              <span>{{ item.money }}</span>
            </div>
          </div>
<!--          </swiper-slide>-->
        </template>
<!--        </swiper>-->
      </div>
      <div class="btn">
        <van-button type="primary" size="large" v-debounce="buyNow">立即购买</van-button>
      </div>
      <div class="card" style="display: flex;flex-direction: row;justify-content: center;font-size: 13px;margin-top: 10px;">
        <van-checkbox v-model="state.agreement_btn"></van-checkbox>
        <div>
          <span style="margin-left: 10px;font-size: 13px;">我已阅读并同意</span>
          <span @click="navigationTo('agreement','user_agreement')" style="color: #F74690;font-size: 13px;">《用户协议》</span>
        </div>
      </div>
      <van-divider :style="{ color: '#FD4182', borderColor: '#FD4182', padding: '16px 64px' }">视频认证会员详情</van-divider>
      <div class="agreement_content">
        <p v-html="state.cur_selected_item_content"></p>
      </div>
    </div>
  </div>

  <!-- 门店成交弹唱 -->
  <MyDialogBtn v-model:show="state.storeShow">
    <template #content>
      <div>您现在是否在线下实体门店？</div>
    </template>
    <template #btn>
      <van-button type="primary" @click="jumpSelectStore">是</van-button>
      <van-button type="success" @click="pay">不是</van-button>
    </template>
  </MyDialogBtn>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useMainStore } from '@/store/index';
import { wxVipAuthPay } from '@/api/common';
import { createVipAuthOrder,videoAuthList } from '@/api/index';
import wxApiReady from '@/hooks/wxApiReady';
import { Toast,Checkbox, Swipe, SwipeItem } from 'vant';
import wx from 'weixin-jsapi';
import {useRoute, useRouter} from "vue-router";
import MyDialogBtn from '@/components/MyDialogBtn.vue';
import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';

const route = useRoute();
const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
  storeShow:false,
  cur_selected_item:0,
  cur_selected_item_content:'',
  agreement_btn:0,
	vip_auth_introduce: '',
	vip_auth_fee: '',
  is_offline:0,
  videoAuthList:[]
});

// 导航跳转
const navigationTo = (name: string, type?: string): void => {
  router.push({ name , query: { type }});
};

onMounted(() => {
  getVideoAuthList();
});

const selectClick = (index: number) => {
  state.cur_selected_item = index;
  let videoAuthItem = state.videoAuthList[index]
  state.cur_selected_item_content = videoAuthItem.content
};

const buyNow = () => {
  if (state.agreement_btn == 0) {
    return Toast.fail('请阅读并勾选用户协议')
  }
  state.storeShow = true
};

const jumpSelectStore = () => {
  let videoAuthItem = state.videoAuthList[state.cur_selected_item]
  Toast('请选择付款所在门店')
  router.push({ name: 'storeList' , query : {package_id:videoAuthItem.id,money:videoAuthItem.money}})
}

const pay = async () => {
  let videoAuthItem = state.videoAuthList[state.cur_selected_item]
  const res = await createVipAuthOrder(mainStore.user_id, videoAuthItem.money,videoAuthItem.id,0,0);
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
  const oid: number = res.data;
  const params: any = await wxVipAuthPay(oid);
  wxApiReady(['chooseWXPay'])
      .then((res) => {
        state.storeShow = false
        wx.chooseWXPay({
          timestamp: params.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
          nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
          package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: params.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
          paySign: params.paySign, // 支付签名
          success: async (result: object) => {
            // 支付成功后的回调函数
            console.log(result);
            Toast.success('支付成功');
            setTimeout(() => {
              navigationTo('index');
            }, 2000);
          }
        });
      })
      .catch((err) => console.log(err));
}

const getVideoAuthList = () => {
	videoAuthList().then((res: any) => {
    res.data.map((item: any,i: number) => {
      if (i == 0) {
        state.cur_selected_item_content = res.data[0].content
      }
      item.money = parseFloat(item.money);
    });
		state.videoAuthList = res.data;
	});
  console.log(state.videoAuthList)
};
</script>

<style lang="scss" scoped>
.swipe_item {
  width: 120px;
}
:deep(.van-swipe) {
  .swipe_item {
    margin-right: 10px;
  }
  .swipe_item:last-child {
    margin-right: 0;
  }
  .van-swipe__track {
    //width: calc(100% + 20px) !important;
  }
}
:deep(.van-checkbox) {
  .van-checkbox__icon {
    font-size: 13px;
  }
  .van-checkbox__icon .van-icon {
    border-color: #F74690;
  }
  .van-checkbox__icon--checked .van-icon {
    background-color: #F74690;
    border-color: #F74690;
  }
}
.agreement_content {
  padding-top: 16px;
  padding: 0 32px;
  p {
    color: #FE5D96;
    font-size: 12px;
    line-height: 24px;
  }
}
.van-button--primary {
  background: #FE5D96;
  border-color: #FE5D96;
  border-radius: 25px;
  height: 45px;
}
.video_auth_box {
  background-color: #FFD3E3;
  padding-top: 10px;
  //position: relative;
  //height: 1000px;
  //background-image: url("@/assets/img/video/bg.png");
  //background-repeat: no-repeat;
  //background-size: 100%;
  .bottom_box {
    //position: absolute;
    //bottom: 0;
    width: 100%;
    padding-bottom: 30px;
    .btn_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 16px;
      div.row {
        width: 45%;
        height: 70px;
        //opacity: 0.5;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #FD4182;
        border-radius: 10px;
      }
      div.row:nth-child(2) {
        margin-right: 0;
      }
      div.select_item_active {
        background: #FE5E98;
        opacity: 1;
        div.title {
          font-weight: bold;
          font-size: 14px;
          color: white;
        }
        div.price {
          color: white;
          .symbol {
            font-size: 12px;
          }
        }
      }
      div.row:last-child {
        margin-right: 0;
      }
      div.title {
        font-weight: bold;
        font-size: 14px;
        color: #F43175;
      }
      div.price {
        color: #F43175;
        .symbol {
          font-size: 12px;
        }
      }
    }
    .btn {
      padding: 0 16px;
      margin-top: 10px;
    }
  }
}
</style>
